<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div class="slide-item">
    <img v-bind:src="menuObj.categoryImage">
    <p>{{menuObj.className}}</p>
  </div>
</template>
<script>
  export default{
    components:{

    },
    props:{
      menuObj:{
        type:Object,
        default () {
          return {}
        }
      }
    },
    methods:{
      clickMenu(item){
        console.log(item.classId)
      }
    }
  }
</script>
<style lang="less">
  @import './../../../styles/lessBase.less';
  .slide-item{
    height: 7.5rem;
    width: 20%;
    display: flex;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .slide-item img{
    height: 4rem;
    width: 4rem;
  }
  .slide-item p{
    font-size: @middleFontSize;
    color: black;
    padding-top: 0.3rem;
  }
  /*::-webkit-scrollbar{*/
    /*display: none;*/
  /*}*/
  .slide-item:active{
    background: #e0e0e0;
  }
</style>
